<!--
 * @Description: 单据编码规则
 * @Author: 
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: 
 * @LastEditTime: 2020-06-29 13:34:36
-->
<template>
  <div class="pages_content pageConfig">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="main_left scroll">
          <treeContainer :arr="treearr" @chooseTree="setTree" />
        </div>
        <div class="main_right">
          <div style="padding: 10px; 0">
            <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='SHOUYBJ'))!==-1" size="medium" class="bottom_all" @click="toindex('indexEditor')">首页编辑</el-button>
            <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='SHOUYYL'))!==-1" size="medium" class="bottom_all_two" @click="toindex('indexSee')">首页预览</el-button>
          </div>
          <div v-loading="loading" :style="style" element-loading-text="页面结构图加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.6)">
            <div class="flex">
              <div class="top">
                <div class="left">
                  <div class="title">
                    <img class="img" src="@/assets/nav/logo.png" />
                    <span>华西绿舍云平台</span>
                  </div>
                </div>
                <div class="center">
                  <div>基础系统</div>
                  <div>ICPS系统</div>
                  <div>财务系统</div>
                  <div>报表系统</div>
                  <div>更多</div>
                </div>
                <div class="right_top-menu">
                  <div>
                    <div>
                      <IconA :index="theme"></IconA>
                    </div>
                  </div>
                  <!--颜色-->
                  <div>
                    <div>
                      <IconB :index="theme"></IconB>
                    </div>
                  </div>
                  <!--下载-->
                  <div>
                    <IconF :index="theme"></IconF>
                  </div>
                  <!--字体-->
                  <div>
                    <IconC :index="theme"></IconC>
                  </div>
                  <!--通知-->
                  <div>
                    <el-badge :value="12">
                      <IconD :index="theme"></IconD>
                    </el-badge>
                  </div>
                  <!--头像-->
                  <div>
                    <div class="user_avatar">
                      <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                      <span class="user_name">用户名</span>
                      <IconE :index="theme"></IconE>
                    </div>
                  </div>
                </div>
              </div>
              <template v-for="(item, index) in flex">
                <div v-if="index == 0" :key="index" class="admin-bg">
                  <div class="adminIndex">
                    <div class="in-left shadow" :style="leftStyle">
                      <div></div>
                    </div>
                    <div class="center"></div>
                    <div class="in-right shadow" :style="rightStyle">
                      <div v-for="(tiitem, tiindex) in flex[0].pages.list" :key="tiindex" :class="'item item' + tiindex" :style="col(tiitem.height)">
                        <div v-if="tiitem.name == 'iframe'">iframe的URL:{{ tiitem.url }}</div>
                        <div v-else style="color: #000000;">{{ tiitem.name }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else :key="index" class="admin-bg">
                  <div class="new-page shadow">
                    <div v-for="(pagesItem, pagesIndex) in item.pages" :key="pagesIndex" :style="coll(pagesItem.height)" class="pages_col">
                      <div v-for="(arrItem, arrIndex) in pagesItem.arr" :key="arrIndex" :style="'width:' + arrItem.width" class="pages_item">
                        <div>{{ arrItem.name }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import breaDcrumb from "@/components/breadcrumb";
import treeContainer from "@/components/GlobalTree/tree";
import { mapGetters } from "vuex";
import IconA from "@/components/icon/nav_iconA";
import IconB from "@/components/icon/nav_iconB";
import IconC from "@/components/icon/nav_iconC";
import IconD from "@/components/icon/nav_iconD";
import IconE from "@/components/icon/nav_iconE";
import IconF from "@/components/icon/nav_iconF.vue";
import { queryPage } from "@/api/basedata/role.js";
import { getInfo } from "@/api/basedata/pageConfig.js";
export default {
  components: {
    breaDcrumb,
    treeContainer,
    IconA,
    IconB,
    IconC,
    IconD,
    IconE,
    IconF,
  },
  data() {
    return {
      flex: [],
      treearr: [],
      loading: false,
      roleId: "",
      ButtonList: []
    };
  },
  beforeCreate() {
    const data = {
      page: 1,
      pageSize: 99999,
    };
    queryPage({
      ...data,
      enable: 1,
    }).then((res) => {
      this.treearr = res.data.data;
      this.treearr = res.data.data.filter((res) => res.typeId == "36351763d7724b4e86629551c165e5f7");
    });
  },
  created() {
    this.ButtonList = this.$ButtonList()
  },
  methods: {
    coll(height) {
      return (
        "height: calc(calc(100%) * " +
        (Number(height.replace(/[\px]/g, "")) / 973).toFixed(2)
      );
    },
    col(height) {
      return (
        "height: calc(calc(100% - 40px) * " +
        (Number(height.replace(/[\px]/g, "")) / 877).toFixed(2)
      );
    },
    toindex(route) {
      let _this = this;
      if (_this.roleId == "") {
        _this.$message({
          message: "警告哦,请先选择角色！！！",
          type: "warning",
        });
        return;
      }
      sessionStorage.setItem("flex", JSON.stringify(_this.flex));
      _this.$router.push({ name: route, query: { roleId: this.roleId } });
    },
    getInfo(id) {
      getInfo({ id: id, type: "type_role" }).then((res) => {
        if (res.data) {
          this.flex = JSON.parse(JSON.parse(res.data).pageInfo);
        } else {
          this.flex = "";
        }

        this.loading = false;
      });
    },
    /*接受树状数据*/
    setTree(e) {
      this.loading = true;
      this.roleId = e.id;
      this.getInfo(e.id);
    },
  },
  computed: {
    ...mapGetters({
      screenWidth: "getscreenWidth",
      screenHeight: "getscreenHeight",
      Collapse: "getsCollapse",
      theme: "gettheme",
    }),
    leftStyle() {
      return (
        "width: calc(calc(100% - 15px) * " +
        this.flex[0].pages.leftwidth +
        " );"
      );
    },
    rightStyle() {
      return (
        "width: calc(calc(100% - 15px) * " +
        this.flex[0].pages.rightwidth +
        " );"
      );
    },
    style() {
      let num = 0;
      if (this.Collapse) {
        num = this.screenWidth - 325;
      } else {
        num = this.screenWidth - 421;
      }
      return (
        "padding:10px 10px 0 10px;width:" + num + "px;height:calc(100% - 56px)"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.in-left {
  padding: 10px;
  background: #ffffff;
  border-radius: 4px;
  > div {
    width: 100%;
    height: 100%;
    background: $bg_colorTable;
    border-radius: 4px;
  }
}
.pages_col {
  display: flex;
}
.pages_item {
  padding: 10px;
  > div {
    width: 100%;
    height: 100%;
    background: $bg_colorTable;
    border-radius: 4px;
    @include discen;
  }
}
.in-right {
  .item {
    overflow: hidden;
    background: #ffffff;
    border-radius: 4px;
    > div {
      background: $bg_colorTable;
      border-radius: 4px;
      height: 100%;
      @include discen;
    }
  }

  .item:first-child {
    padding: 10px 10px 5px 10px;
  }

  .item:nth-child(2) {
    padding: 5px 10px 5px 10px;
  }

  .item:nth-child(3) {
    padding: 5px 10px 10px 10px;
  }
}
.admin-bg {
  width: 100%;
  height: 696px;
  padding: 10px;
  background: #f2f5f3;
}
.new-page {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
}
.adminIndex {
  width: 100%;
  height: 100%;
  display: flex;
  .center {
    width: 15px;
  }
}
.flex {
  height: 100%;
  width: 100%;
  overflow: auto;
  // border: 1px $bg_color solid;
  border-radius: 4px;
}
.flex::-webkit-scrollbar {
  width: 3px;
  height: 2px;
}
.flex::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
.flex::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
.flex::-webkit-scrollbar-thumb:hover {
  background: #333;
}
.flex::-webkit-scrollbar-corner {
  background: #179a16;
}
.left {
  color: rgba(255, 255, 255, 0.65);
  @include discen_al;
  .title {
    @include discen_al;
    padding-right: 10px;
    > span {
      color: #ffffff;
    }
  }
}
.center {
  color: rgba(255, 255, 255, 0.65);
  @include discen_al;
  > div {
    padding: 0 10px;
  }
}
.top {
  height: 45px;
  background: $bg_color;
  width: 100%;
  @include discen_al;
  justify-content: space-between;
  padding: 0 20px;
}
.right_top-menu {
  @include discen_al;
  > div:hover > div * {
    cursor: pointer;
    color: #ffffff;
  }
  > div {
    padding-left: 20px;
    @include discen;
    i {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.65);
    }
  }
  .user_avatar {
    padding-left: 20px;
    @include discen;
    .user_name {
      color: #ffffff;
      font-size: 14px;
      padding: 0 10px;
      color: rgba(255, 255, 255, 0.65);
    }
  }
}

.pageConfig {
  font-size: $font_size;
  .el-main {
    padding: 0;
    display: flex;
    overflow: hidden;
  }
  .main_left {
    border-right: 1px solid #e1e5ed;
    height: 100%;
    overflow: auto;
  }
  .main_right {
    // height: 100%;
    overflow: auto;
    // padding-top: 20px;
  }
  .main_right::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  .main_right::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  .main_right::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
  }
  .main_right::-webkit-scrollbar-thumb:hover {
    background: #333;
  }
  .main_right::-webkit-scrollbar-corner {
    background: #179a16;
  }
}
</style>
